<template>
   <div>
      <div class="search content-box">
          <h6 class="title-h6">下载器分析筛选条件</h6>
          <xzq-search v-on:updateTable="updateTable" > </xzq-search>  
      </div>
      <div  style="background:#fff;padding-top:20px; margin-top:10px;border:1px solid #ddd;border-radius: 5px;" ref="element">
        <div class="blok-header clearfix" >
            <el-button-group>
                <el-button type="success">下载器和物料</el-button>
                <el-button ><router-link :to="{name: 'xzqdetail'}">下载器明细</router-link></el-button>
                <el-button ><router-link :to="{name: 'xzqunitprice'}">成功单价</router-link></el-button>
            </el-button-group>
        </div>
        <el-row style="padding:0px 15px 15px 15px;box-sizing: content-box;">
            <!-- <keep-alive> -->
                <line-chart :chart-data="lineChartData" v-if="lineChartData.seriesData" v-show="tableData.length != 0"></line-chart>
                <div v-show="tableData.length == 0">暂无相关数据</div> 
            <!-- </keep-alive> -->
            
        </el-row>  
      </div >
      <div style="background-color:#fff;padding:10px 15px;border:1px solid #ddd;border-radius: 5px;margin-top:10px;">
        <div style="margin-bottom:10px;text-align:right;margin-top:10px"><el-button type="primary"  @click="handleDownload" :loading="downloadLoading">导出列表</el-button></div>
        <div > 
            <el-table
            :data="tableData" v-loading="loading"
          element-loading-text="拼命加载中..."
            style="width: 100%;text-align:center" :default-sort = "{prop: 'time', order: 'descending'}">
                <el-table-column
                label="下载器数据" align="center">
                <el-table-column
                    prop="product_datas.week"
                    label="周数" align="center" width="90">
                </el-table-column>
                <el-table-column
                    prop="time" align="center" show-overflow-tooltip
                    label="时间">
                </el-table-column>
                <el-table-column
                    prop="product_datas.open" align="center"  :formatter="formatterNumber"
                    label="打开量">
                </el-table-column>
                <el-table-column
                    prop="product_datas.success" align="center" :formatter="formatterNumber"
                    label="成功量">
                </el-table-column>
                <el-table-column
                    prop="product_datas.success_rate" align="center"  
                    label="成功率">
                </el-table-column>
                <el-table-column
                    prop="product_datas.mon" align="center"
                    label="成功日环比">
                </el-table-column>
                </el-table-column>
                <el-table-column label="物料数据" align="center">
                <el-table-column
                    prop="site_datas.show" align="center" :formatter="formatterNumber"
                    label="展现量">
                </el-table-column>
                <el-table-column
                    prop="site_datas.check" align="center" :formatter="formatterNumber"
                    label="勾选量">
                </el-table-column>
                <el-table-column
                    prop="site_datas.ok" align="center" :formatter="formatterNumber"
                    label="成功量">
                </el-table-column>
                <el-table-column
                    prop="site_datas.ok_rate" align="center"
                    label="勾选成功率(成功/勾选)">
                </el-table-column>
                <el-table-column
                    prop="site_datas.check_rate" align="center"
                    label="展现勾选率(勾选/展现)"> 
                </el-table-column>
                <el-table-column
                    prop="site_datas.ok_success" align="center"
                    label="所有物料的成功量/所有下载器的总的成功量" min-width="120">
                </el-table-column>
                <el-table-column
                    prop="site_datas.mon" align="center"
                    label="成功日环比">
                </el-table-column>
                </el-table-column>
            </el-table>
            </div>
        </div>
   </div>
</template>

<script>
import XzqSearch from '@/components/XzqData/XzqSearch'
import LineChart from '@/components/XzqData/LineChart'
import {mapGetters, mapActions} from 'vuex'
import {downloaderAnalyzeUrl, getHeader } from '@/config/config'
import axios from 'axios'

// import echarts from 'echarts'

export default {
  name: 'DataDownlaoder',
  data() {
      return {
          chartWidth: null,
          lineChartData: {
              xAxisData: null,
              legendData: null,
              seriesData: null
          },
          loading: true,
          downloadLoading: false,
          tableData: [],
          searchUrl: downloaderAnalyzeUrl,
          excelData: []
      }
  },
  
  components: {
      XzqSearch,
      LineChart
  },
  computed: {
    ...mapGetters([
        'downloaderSearch',
        'requestData'
    ])
  },
  mounted() {
      //this.getData();
  },
  created(){
    setTimeout(() => {
        this.getData()
    },10)
    this.downloaderSearch.cycle = 'day'
    // this.fullscreenLoading = true;
    // console.log(this.tableData)
    // this.setChartData()
      
  },
  methods: {
    //   handleClick(tab, event) {
    //     console.log(tab, event);
    //   },
    //   formatterPercentage(row, column, cellValue, index) {
    //      return row.download.sucprobability + '%'
    //   },
      formatterNumber(row, column, cellValue, index) {
        return parseInt(cellValue).toLocaleString()           
      },
      handleDownload() { //导出excel
        this.downloadLoading = true;
        let _this = this;
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel')
          const tHeader = ['时间', '周数', '打开量', '成功量', '成功率', '成功日环比', '展现量', '勾选量', '成功量', '勾选成功率(成功/勾选)', '展现勾选率(勾选/展现)', '所有物料的成功量/所有下载器的总的成功量', '成功日环比']
          const thead = ['time', 'week', 'open', 'success', 'success_rate', 'mon', 'show', 'check', 'ok', 'ok_rate','check_rate','ok_success','mon2']
          const list = _this.excelData;
          const filterVal = thead;
          const data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '下载器分析excel')
          this.downloadLoading = false
        })
    },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map( j => {
                if(v[j] === undefined ) {
                    return v[j] = '';
                }else {
                    return v[j]
                }
                
            }
            
        ))
    },
    getData() {
      axios.get(downloaderAnalyzeUrl, { headers: getHeader(), params: this.requestData})
      .then(response => {
          if(response.status === 200 && response.data.success) {
              this.loading = false;
              this.tableData = []
              this.excelData = []
              let data = response.data.data
              for(let key in data.site_datas) {
                  let obj = {
                      time: key,
                      product_datas: {},
                      site_datas: {}
                  }
                  obj['product_datas'] = data.site_datas[key]
                  obj['site_datas'] = data.product_datas[key]
                  this.tableData.push(obj)
              }
              this.setChartData()
              this.tableData.forEach(v => {
                  let obj = {
                      time: v.time,
                      week: v.product_datas.week,
                      open: v.product_datas.open,
                      success: v.product_datas.success,
                      success_rate: v.product_datas.success_rate,
                      mon: v.product_datas.mon,
                      show: v.site_datas.show,
                      check: v.site_datas.check,
                      ok: v.site_datas.ok,
                      ok_rate: v.site_datas.ok_rate,
                      check_rate: v.site_datas.check_rate,
                      ok_success: v.site_datas.ok_rate,
                      mon2: v.site_datas.mon
                  }
                  this.excelData.push(obj)
              })  
          }else {
              this.$message.error('获取列表失败 !')
          }
        //   console.log(response)
      })
      .catch((e) => {
        this.$message.error('获取列表失败 !')
      })
    },
    setChartData() {
      // 设置图表组件的数据
        let _this = this;
        this.lineChartData['xAxisData'] = [];
        this.lineChartData['legendData'] = ['打开量', '成功量', '成功率'];
        this.lineChartData['seriesData']  = [];
        let openArr = [], successArr = [], sucprobabilityArr = [];
        this.tableData.forEach(v => {
            _this.lineChartData['xAxisData'].push(v.time);
            openArr.push(parseInt(v.product_datas.open));
            successArr.push(parseInt(v.product_datas.success));
            let num = v.product_datas.success_rate.replace(/%/ig,"");
            sucprobabilityArr.push(parseFloat(num));
        })
        this.lineChartData['seriesData'][0] = openArr;
        this.lineChartData['seriesData'][1] = successArr;
        this.lineChartData['seriesData'][2] = sucprobabilityArr;
          
    },
    updateTable(infostr) {
        if(infostr === 'updata') {
            this.fullscreenLoading = true
            this.loading = true
            this.getData()
            
        }
    }
  }
}
</script>

<style>
.el-tabs__item.is-top a {
    display: block;
    width: 100%;
    height: 100%;
    color: #909399;
}
#myChart {
    width: 100%;
}
.blok-header {
  margin-bottom:10px;
}
.blok-header li{
    float: left;
    }
.blok-header  a {
    color: #666;

}    
</style>
